<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h2>scrollTop和scrollLeft</h2>
    <p>是可滚动元素对象的属性，表示滚动出去，看不见的那部分的高度，可读可写，写它相当于控制它的滚动</p>

    <h3>整个页面的滚动对象</h3>
    <p>要注意的是，整个页面的滚动对象是document.documentElement，它实际上是html元素对象，获取页面的滚动距离要从这个对象里获取</p>
    <p>但是为整个页面设置滚动事件时，需要对window对象设置</p>

    <h2>clientWidth和clientHeight</h2>
    <p>任何元素的宽度和高度，包括内容区和padding区。获取页面的宽高也应该获取document.documentElement的</p>

    <h2>offsetWidth和offsetHeight</h2>
    <p>任何元素的宽度和高度，包括内容区和padding区还有<em>边框</em></p>

    <h2>offsetTop和offsetLeft</h2>
    <p>任何元素相对于它的<em>包含块</em>的距离，也就是第一个开启定位的祖先元素</p>
</body>
</html>